import { PlusCircleOutlined, CloseCircleFilled } from '@ant-design/icons';
import { subProcess } from '../operations';
import './style.less';

export default function SubProcessSelector(props: any) {
    const { value, onChange } = props;

    const handleSelected = (selected: { key: any; name: string; id: string }) => {
        onChange({
            id: selected?.key || '',
            text: selected?.name || '',
            processId: selected?.id || '',
        })
    };

    const selectSubProcess = () => {
        subProcess({ handleSelected, selectedSubProcessKey: value?.id });
    };

    const onDelete = () => {
        onChange({
            id: '',
            text: '',
            processId: '',
        })
    };

    return (
        <div className="process-designer-sub-process-select-wrapper">
            <div className="process-designer-sub-process-select-process">
                {value?.text || ''}
            </div>
            {
                value?.id
                &&
                <div className="process-designer-sub-process-select-delete">
                    <CloseCircleFilled onClick={onDelete} />
                </div>
            }
            <div className="process-designer-sub-process-select-icon">
                <PlusCircleOutlined onClick={selectSubProcess} />
            </div>
        </div>
    )
}